<template>
	<div class="flex flex-col items-center justify-center p-3">
		<!-- 顶部 -->
		<div class="dataVolumeBox">
			<span class="text">数据总量</span>
			<span ref="total" class="numberText">0</span>
			<span class="text">条数据</span>
		</div>

		<!-- 底部 -->
		<div class="grid grid-cols-3 gap-y-2 w-full text-center mt-2">
			<!-- 减去顶部Total的数值 -->
			<div v-for="(value, key) in bottomTotalData" :key="key" class="areaItemBox">
				<span class="area">{{ areaKeyMap[key] }}：</span>
				<span :ref="key" class="number">0</span>
			</div>
		</div>
	</div>
</template>

<script setup>
	// eslint-disable-next-line
	import { ref, watch, onMounted, getCurrentInstance, nextTick } from 'vue';
	import { useVisualizationStore } from '@/stores/visualizationStore';
	import { CountUp } from 'countup.js';

	// v-model | 底部区域渲染成功后需要将它设置为true | 这样map组件才能渲染
	const topTitleIsForOk_Model = defineModel({ type: Boolean });

	const visualizationStore = useVisualizationStore();
	const { proxy } = getCurrentInstance();

	// 顶部数据
	const topTotalData = ref({});
	// 底部数据
	const bottomTotalData = ref({});
	// 地区key对应的汉字
	const areaKeyMap = { db: '东北', hb: '河北', hd: '华东', xb: '西北', xn: '西南', zn: '中南' };

	// 数据获取成功后的处理函数
	const handleData = () => {
		// 仓库中的数据
		const allData = JSON.parse(JSON.stringify(visualizationStore.data.totalData));

		// 设置顶部数据
		topTotalData.value = { total: allData.total };
		// 删除顶部数据后, 其余都是底部数据
		delete allData.total;
		// 设置底部数据
		bottomTotalData.value = allData;

		// 由于上面渲染数据了, 所以在渲染完成后在获取 ref -> 遍历所有数据, 初始化 countUpjs
		nextTick(() => {
			topTitleIsForOk_Model.value = true;

			for (let key in { ...topTotalData.value, ...bottomTotalData.value }) {
				new CountUp(
					// v-for渲染出来的, 在获取ref时返回的是数组.
					proxy.$refs[key][0] ? proxy.$refs[key][0] : proxy.$refs[key],
					visualizationStore.data.totalData[key]
				).start();
			}
		});
	};

	// 挂载成功后, 监视着仓库数据变化
	onMounted(() => {
		// 检测目标数据是否已经初始化
		if (visualizationStore.data) handleData();

		watch(
			() => visualizationStore.data,
			() => handleData()
		);
	});
</script>

<style scoped lang="scss">
	// 定义字体
	@font-face {
		font-family: 'numberFont';
		src: url('@/assets/fonts/FX-LED.ttf') format('woff2');
	}

	// 数据总量
	.dataVolumeBox {
		// 两侧文本
		.text {
			@apply text-xl;
		}

		// 数据值
		.numberText {
			@apply font-["numberFont"] text-6xl px-3;
			// 为文字设置渐变
			background: linear-gradient(to bottom, #fff, rgb(128, 172, 232));
			background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}

	// 单个地区
	.areaItemBox {
		// 地区
		.area {
			@apply text-base text-[#9ca3af];
		}
		// 数值
		.number {
			@apply font-["numberFont"] text-3xl text-[#3b82f6];
		}
	}
</style>
